<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		body{
			padding: 0;
			margin: 0;
		}
		h1{
			display: block;
		}
        .banner-wrap{
			background-color: #FFF;
			width: 100%;
			position: relative;
		}
        .banner-wrap img{
			height: auto;
			width: 100%;
		}
		.banner-form{
			width: 500px;
			position: absolute;
			left:60%;
			top:15%

		}
		.banner-form h1{
		  font-size: 56px;
		  line-height: 1.5;
		  color: midnightblue;
		  }
		  .banner-form .banner-input label{
		    display: block;
		    width:240px;
		    height:48px;
		    border-radius:4px;

		    padding: 8px 0 8px 46px;
		    position: relative;
		    float: left;
		  }
		  .banner-form .banner-input label i{
		    display: inline-block;
		    width: 14px;
		    height: 14px;
		    position: absolute;
		    left: 16px;
		    top: 16px;
		    background:  no-repeat center center;
		    background-size: 100% 100%;
		  }

		  .banner-form .banner-input label input{
		    width: 100%;
		    height: 100%;
		    border: none;
		    padding: 0 16px;
		    font-size: 14px;
		  }
		  .banner-form .banner-input a{
		    display: block;
		    width:148px;
		    height:48px;

		    border-radius:4px;
		    text-align: center;
		    line-height: 48px;
		    color: #fff;
		    font-size: 14px;
		    float: right;
		  }
		  .advantage-wrap{
		    width: 100%;
		    height: 308px;
			border:1px solid red;
		    background-color: #fff;
		    margin-bottom: 20px;
		  }


		  .advantage-wrap ul{
		    width: 1250px;
		    height: 100%;
		    margin: 0 auto;
		  }
		  .advantage-wrap ul li{
			  width: calc(25%);
			  float:left;
			  text-align: center;
			  margin-top: 48px;
			  margin-right: 30px;

		  }

		  .advantage-wrap ul li:hover{
		    box-shadow: 0 0 20px rgba(0,0,0,.2);
		  }
		  .advantage-wrap ul li{
			  margin-top: 48PX;
			padding: 30px 30px 30px 30px;
		  }
		  .advantage-wrap ul li  {
		      background:  no-repeat center center;
		      background-size: 100% 100%;

		}
		.advantage-wrap ul li:last-of-type{
		  margin-right: 0;
		}

		.page-title {
		    width: 1250px;
		    font-size: 56px;
		    text-align: center;
		    font-weight: bold;
		    color: black;
		    margin: 60px auto;
		    line-height: 1;
		}
		.vehicle-list {
			width: 1250PX;
			margin: 0 auto;
		}
		.vehicle-list ul{
			width: 100px;
		}
		ul,ol{
			list-style: none;
		}
		.advantage-wrap ul li {
		    margin-top: 48PX;

		    padding: 30px 30px 30px 30px;
			width: calc(25%);
			float: left;
			text-align: center;
			margin-right: 30px;
		}


		/* 爆款车型任你选 */
		.vehicle-list{
		  width: 1250px;

		  margin: 0 auto;

		}
		.vehicle-list ul{
		  width: 100%;
		}
		.vehicle-list .vehicle-item{
		  width: 31%;
		  background-color: #fff;
		  margin-right: 30px;
		  margin-bottom: 30px;
		  float: left;
		  border-radius: 5px;
		  overflow: hidden;
		}
		.vehicle-list .vehicle-item:nth-of-type(3n){
		  margin-right: 0;
		}
		.vehicle-list .vehicle-item img{
		  width: 402px;
		  height: 209px;
		}
		.vehicle-list .vehicle-item .vehicle-item-content{
		  padding: 20px;
		}
		.vehicle-list .vehicle-item .vehicle-item-content h2{
		  font-size: 16px;
		  color: #001024;
		}
		.vehicle-list .vehicle-item .vehicle-item-content {
		  margin: 10px 0;
		}
		.vehicle-list .vehicle-item .vehicle-item-content .tags span{
		  display: inline-block;
		  margin-right: 10px;
		  padding: 4px 8px;
		  background-color: #eee;
		  border-radius: 3px;
		  color: #364554;
		}
		.vehicle-list .vehicle-item .vehicle-item-content ol li{
		  display: inline-block;
		  margin: 5px 20px 10px 0;
		}
		.vehicle-list .vehicle-item .vehicle-item-content ol li span{
		  display: block;
		  line-height: 1.5;
		}
		.vehicle-list .vehicle-item .vehicle-item-content ol li span:first-of-type{
		  color: #999;
		}
		.vehicle-list .vehicle-item .vehicle-item-content ol li span:last-of-type{
		  color: #f00;
		  font-size: 18px;
		}
		.vehicle-list .vehicle-item .vehicle-item-content {
		  color: #999;
		  margin: 5px 0 30px;
		}
		.vehicle-list .vehicle-item .vehicle-item-content a{
		  display: block;
		  width: 100%;
		  margin-top:10px;
		  background-color: #f16622;
		  padding: 11px;
		  text-align: center;
		  color: #fff;
		  border-radius: 3px;
		  font-size: 14px;
		}
		/*预约表*/
        .white_content {
            display: none;
            position: fixed;;
            top: 25%;
            left: 25%;
            width: 350px;
            height: 250px;
            padding: 48px 32px;
            border: 10px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
         }
    </style>
</head>
<body>
<div class="banner-wrap">
    <img src="https://lalamc.huolala.cn/images/banner.png"/>
    <div class="banner-form">
        <h1>货拉拉购车专享</h1>
        <h1>超低首付</h1>
        <div class="banner_input">
            <label for="mobile" style="background: rgb(255, 255, 255);">
                <i></i> <input type="number" id="mobile" placeholder="请输入手机号">
            </label>
            <input >
            <a href = "javascript:void(0)" onclick = "fn1()">马上预约购车礼包</a>
        </div>
    </div>
</div>
<div class="advantage-wrap">
    <ul class="clearfix">
        <li>
            <div class="advantage-iocn1"></div>
            <h3>包上牌</h3>
            <p>轻松上牌,快速上路,提车赚钱</p>
        </li>
        <li>
            <div class="advantage-iocn2"></div>
            <h3>提车快</h3>
            <p>大量现车不用等,一天就可开新车</p>
        </li>
        <li>
            <div class="advantage-iocn3"></div>
            <h3>送会员</h3>
            <p>买车就送超级会员,抢单无上限</p>
        </li>
    </ul>
</div>
<h1 class="page-title">爆款车型任你选</h1>


<div class="vehicle-list">
    <ul>
        <li class="vehicle-item">
            <img src="https://lalamc.huolala.cn/images/car1.png">
            <div class="vehicle-item-content">
                <h2>长安神骐T20平板(平板)</h2>
                <a href="">马上预约，领取购车礼包</a>
            </div>
        </li>
        <li class="vehicle-item">
            <img src="https://lalamc.huolala.cn/images/car2.png">
            <div class="vehicle-item-content">
                <h2>长安睿行M80两座（中面）</h2>
                <a href="">马上预约，领取购车礼包</a>
            </div>
        </li>
        <li class="vehicle-item">
            <img src="https://lalamc.huolala.cn/images/car3.png">
            <div class="vehicle-item-content">
                <h2>五菱荣光V（小面）</h2>
                <a href="">马上预约，领取购车礼包</a>
            </div>
        </li>
        <li class="vehicle-item">
            <img src="https://lalamc.huolala.cn/images/car4.png">
            <div class="vehicle-item-content">
                <h2>上汽依维柯V35（大面）</h2>
                <a href="">马上预约，领取购车礼包</a>
            </div>
        </li>
        <li class="vehicle-item">
            <img src="https://lalamc.huolala.cn/images/car5.png">
            <div class="vehicle-item-content">
                <h2>长安睿行M80四座（中面）</h2>
                <a href="">马上预约，领取购车礼包</a>
            </div>
        </li>
        <li class="vehicle-item">
            <img src="https://lalamc.huolala.cn/images/car6.png">
            <div class="vehicle-item-content">
                <h2>开瑞优优新能源车（中面）</h2>
                <a href="">马上预约，领取购车礼包</a>
            </div>
        </li>
    </ul>
</div>
<div class="buy-slogan">
    <h1 class="page-title buy-slogan-title">为什么要在货拉拉买车？</h1>
</div>
<div class="buy-slogan-content">
    <div class="clerfix">
        <span></span>
        <span>4S店买车</span>
        <span>货拉拉买车</span>
    </div>
    <o1>
        <li>
            <span>首付（元）</span>
            <span>月供（元）</span>
            <span>礼品</span>
            <span>收入</span>
            <span>运营资质</span>
        </li>
        <li>
            <span>1.2万</span>
            <span>2200+</span>
            <span>小礼品</span>
            <span>路边趴活，收入不定</span>
            <span>无挂靠资质，或需付费挂靠</span>
        </li>
        <li>
            <span style="color: rgb(241, 102, 34);">0元起</span>
            <span style="color: rgb(241, 102, 34);">1900+</span>
            <span>最高价值<em style="color: rgb(241, 102, 34);">2100元</em>超级会员超值到店大礼包</span>
            <span>货拉拉<em style="color: rgb(241, 102, 34);">海量订单</em>，手机一键接单赚钱</span>
            <span><em style="color: rgb(241, 102, 34);">合法有资质</em>，拉货不怕查</span>
        </li>
    </o1>
</div>
/*申请表*/
<div id="light" class="white_content">
    <div class="dialog-form">
        <div class="dialog-close"></div>
        <a href = "javascript:void(0)" onclick = "fn2()">关闭</a>
        <p>
            <input type="text" placeholder="请问怎么称呼您(可选)">
        </p>
        <p>
            <input type="number" placeholder="请输入手机号码">
            <span style="color: rgb(241, 102, 34); cursor: pointer;">获取验证码</span>
        </p>
        <p>
            <input type="text" maxlength="6" placeholder="请输入验证码">
            <a href="javascript:;" style="background-color: rgb(241, 102, 34); cursor: pointer;">立即预约</a>
        </p>
    </div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
<script>
    function fn1(){
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block'
    }
    function fn2(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
    }
</script>
</html>